<template>
  <div class="GdwyyAppJfgd">
    <GdwyyAppCard :list="list" @changeCard="handleChangeCard"></GdwyyAppCard>

    <div class="main-box">
      <div class="item-box" v-for="(item, index) in contentList" :key="index + 'uuu'">
        <div class="top-title rel" @click="handlegoDetail(item)">
          <GdwyyAppBigTitle
            :title="item.label"
            time=""
            :color="item.color"
            :icon="`point${index + 1}`"
          ></GdwyyAppBigTitle>
          <div class="detil-box abs font-12 flex-center">
            详情
            <img
              class="arr-icon"
              :src="require(`../../../../../../assets/imgs/reconsitution/viewAllWorkOrders/icon_jt_xz.png`)"
            />
          </div>
        </div>
        <div class="item-content-box fill-w flex-center flex">
          <div class="top" v-for="(ite, ind) in item.list" :key="ind + '33'">
            <div class="flex-center">
              <img
                class="icon"
                :src="
                  require(`../../../../../../assets/imgs/reconsitution/viewAllWorkOrders/point${index + 1}_${
                    ite.iconTarget
                  }.png`)
                "
              />
              <div class="font-12 color666">{{ ite.label }}</div>
            </div>
            <div class="font-14 num" :class="['main-' + item.color]">{{ topNums[ite.model] || 0 }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { showZwtNav } from '@/utils/showNav.js'
import { postAction } from '@api/manage'
import { reconsitutionMixin } from '@/mixins/reconsitutionMixin.js'
import { GdwyyAppSmallTitle, GdwyyAppBigTitle } from '@/components/reconsitution/index.js'
import GdwyyAppCard from '../components/card.vue'
const _contentItemList = [
  {
    label: '总数',
    iconTarget: 'zs',
  },
  {
    label: '待派单',
    iconTarget: 'dpd',
  },
  {
    label: '已派单',
    iconTarget: 'ypd',
  },
]
const apiConfig = [
  {
    url: '8a31cdd68b28dfb0018b558e9fdd0009',
    resultParamsName: 'topNums',
    loading: 'topNumLoading',
  },
]
export default {
  name: 'GdwyyAppJfgd',
  components: { GdwyyAppCard, GdwyyAppSmallTitle, GdwyyAppBigTitle },
  mixins: [reconsitutionMixin],
  data() {
    return {
      pageTitle: '',
      queryParam: {},
      topNums: {},
      topNumLoading: false,
      list: [
        {
          label: '宽带续费',
          icon: 'icon_fl1',
          value: 1,
          model: 'ZJ_JD',
        },
      ],
      loading: false,
      currentCard: {},
      //   contentList: [
      //     {
      //       label: '融合拉新(移网)',
      //       color: 'red',
      //     },
      //     {
      //       label: '联通云盘模型',
      //       color: 'blue',
      //     },

      //     {
      //       label: '融合拉新(宽带)',
      //       color: 'green',
      //     },
      //     {
      //       label: '携号转出模型',
      //       color: 'org',
      //     },
      //     {
      //       label: '携号转出模型',
      //       color: 'puple',
      //     },
      //   ],
    }
  },

  computed: {
    contentList() {
      return [
        {
          label: '融合拉新(移网)',
          color: 'red',
          list: this.getModelList(_contentItemList, [
            'YX_XQ_RHLX_YW_ZS,YX_0014',
            'YX_XQ_RHLX_YW_DPD,YX_0015',
            'YX_XQ_RHLX_YW_YPD,YX_0016',
          ]),
        },
        {
          label: '联通云盘模型',
          color: 'blue',
          list: this.getModelList(_contentItemList, [
            'YX_XQ_LTYMXZS,YX_0017',
            'YX_XQ_LTYMXDPD,YX_0018',
            'YX_XQ_LTYMXYPD,YX_0019',
          ]),
        },

        {
          label: '融合拉新(宽带)',
          color: 'green',
          list: this.getModelList(_contentItemList, [
            'YX_XQ_RHLX_KD_ZS,YX_0020',
            'YX_XQ_RHLX_KD_DPD,YX_0021',
            'YX_XQ_RHLX_KD_YPD,YX_0022',
          ]),
        },
        {
          label: '携号转出模型',
          color: 'org',
          list: this.getModelList(_contentItemList, [
            'YX_XQ_XHZCS,YX_0023',
            'YX_XQ_XHZCDPD,YX_0024',
            'YX_XQ_XHZCYPD,YX_0025',
          ]),
        },
        {
          label: '移网流失预警',
          color: 'puple',
          list: this.getModelList(_contentItemList, [
            'YX_XQ_YWLSYJS,YX_0026',
            'YX_XQ_YWLSYJDPD,YX_0027',
            'YX_XQ_YWLSYJYPD,YX_0028',
          ]),
        },
      ]
    },
  },

  created() {
    const { pageTitle, queryParam } = this.$route.query
    this.$route.meta.title = this.pageTitle = pageTitle + '详情'
    document.title = this.pageTitle
    showZwtNav(pageTitle)
    this.queryParam = JSON.parse(this.$route.query.queryParam)
    this.setAllRequest(apiConfig, this.queryParam)
    this.getTableData()
  },

  methods: {
    handleChangeCard(item) {
      this.currentCard = item
      this.getTableData()
    },

    async getTableData() {
      this.loading = true

      this.loading = false
    },
    getModelList(data, modelList) {
      return data.map((item, index) => {
        const temp = modelList[index].split(',')
        const obj = {
          ...item,
          model: temp[0],
          kipCode: temp[1],
        }
        return obj
      })
    },
    handlegoDetail(item) {
      const query = {
        pageTitle: item.label, //页面标题
        pageType: 'yxgd',
        queryParam: JSON.stringify({ ...this.queryParam, kpiId: item.list[0].kipCode }), // 查询参数
      }
      this.$open('/publicline/viewAllWorkOrders/detail/yxgdDetail', query)
    },
  },
}
</script>
  
  <style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';

.GdwyyAppJfgd {
  box-sizing: border-box;
  background: #fff;
  height: 100vh;
  .main-box {
    padding: 0 2.1333vw;
  }
  .item-box {
    margin-bottom: 2.9333vw;
    background: #ffffff;
    box-shadow: 0vw 0.5333vw 1.0667vw 0.2667vw rgba(243, 247, 250, 1);
    border-radius: 1.6vw;
  }
  .detil-box {
    color: #aaaaaa;
    right: 10px;
    top: 10px;
    .arr-icon {
      width: 14px;
      height: 14px;
      margin-left: 4px;
    }
  }
  .item-content-box {
    height: 16vw;
    justify-content: space-around;

    .icon {
      width: 3.2vw;
      height: 3.2vw;
      margin-right: 1.0667vw;
    }
    .num {
      margin-left: 4.2667vw;
    }
  }

  ::v-deep {
    .GdwyyAppBigTitle {
      .bold {
        font-size: 4vw !important;
      }
      .icon {
        width: 3.2vw;
        height: 2.6667vw;
      }
    }
  }
}
</style>